<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Meta -->
    <meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
    <meta name="author" content="ruyangit@163.com">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../assets/img/favicon.png">

    <title>Tangdao Responsive Bootstrap 4 Dashboard Template</title>

    <!-- vendor css -->
    <link href="../lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/prismjs/themes/prism-vs.css" rel="stylesheet">

    <!-- Tangdao CSS -->
    <link rel="stylesheet" href="../assets/css/tangdao.css">
    <link rel="stylesheet" href="../assets/css/tangdao.component.css">
    <link rel="stylesheet" href="../assets/css/tangdao.demo.css">
    <link rel="stylesheet" href="../assets/css/skin.gradient.css">

  </head>
  <body class="app-component">
    <header class="navbar navbar-header navbar-header-fixed">
      <a href="" id="mainMenuOpen" class="burger-menu"><i data-feather="menu"></i></a>
      <a href="" id="componentContentHide" class="burger-menu d-none"><i data-feather="arrow-left"></i></a>
      <div class="navbar-brand">
        <a href="../index.html" class="df-logo">Tangdao<span class="mg-l-5">Design</span></a>
      </div><!-- navbar-brand -->
      <div id="navbarMenu" class="navbar-menu-wrapper">
        <div class="navbar-menu-header">
          <a href="../index.html" class="df-logo">Tangdao<span class="mg-l-5">Design</span></a>
          <a id="mainMenuClose" href=""><i data-feather="x"></i></a>
        </div><!-- navbar-menu-header -->
        <ul class="nav navbar-menu">
          <li class="nav-label pd-l-20 pd-lg-l-25 d-lg-none">Main Navigation</li>
          <li class="nav-item"><a href="../docs.html" class="nav-link"><i data-feather="book-open"></i> 文档</a></li>
          <li class="nav-item active"><a href="../components/index.html" class="nav-link"><i data-feather="box"></i> 组件</a></li>
          <li class="nav-item"><a href="../collections/index.html" class="nav-link"><i data-feather="package"></i> 资源</a></li>
          <li class="nav-item"><a href="../template/index.html" class="nav-link"><i data-feather="layers"></i> 模板</a></li>
        </ul>
      </div><!-- navbar-menu-wrapper -->
      <div class="navbar-right">
        <a href="javascript:;" class="search-link" id="navbarSearch"><i data-feather="search"></i></a>
        <div class="dropdown dropdown-notification mg-l-15-f">
          <a href="javascript:;" class="dropdown-link new-indicator" data-toggle="dropdown">
            <i data-feather="bell"></i>
            <span>2</span>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown-header">通知</div>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.2</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.1</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.0</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <div class="dropdown-footer"><a href="">View all Notifications</a></div>
          </div><!-- dropdown-menu -->
        </div><!-- dropdown -->

        <a href="https://gitee.com/ruyangit/tangdao-design" class="mg-l-20"><div class="pd-8 tx-white tx-white-8" ><i data-feather="github" class="wd-20 ht-20"></i></div></a>
      </div><!-- navbar-right -->

      <div class="navbar-search">
        <div class="navbar-search-header">
          <input type="search" class="form-control" placeholder="Type and hit enter to search...">
          <button class="btn"><i data-feather="search"></i></button>
          <a id="navbarSearchClose" href="" class="link-03 mg-l-5 mg-lg-l-10"><i data-feather="x"></i></a>
        </div><!-- navbar-search-header -->
        <div class="navbar-search-body">
          <label class="tx-10 tx-medium tx-uppercase tx-spacing-1 tx-color-03 mg-b-10 d-flex align-items-center">Recent Searches</label>
          <ul class="list-unstyled">
            <li><a href="index.html">modern dashboard</a></li>
            <li><a href="../components/modal.html">modal examples</a></li>
            <li><a href="../components/el-avatar.html">avatar</a></li>
          </ul>
        </div><!-- navbar-search-body -->
      </div><!-- navbar-search -->

    </header><!-- navbar -->

    <div class="component-wrapper">
      <div class="component-navleft">
        <nav class="nav flex-column">
          <a href="#tab-layout" class="nav-link " data-toggle="tab">
            <span data-toggle="tooltip" title="Browse Components" data-placement="right"><i data-feather="layout"></i></span>
          </a>
          <a href="#tab-grid" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Grid System" data-placement="right"><i data-feather="grid"></i></span>
          </a>
          <a href="#tab-util" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Utilities" data-placement="right"><i data-feather="package"></i></span>
          </a>
          <a href="#tab-element" class="nav-link active" data-toggle="tab">
            <span data-toggle="tooltip" title="UI Elements" data-placement="right"><i data-feather="layers"></i></span>
          </a>
          <a href="#tab-form" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Forms" data-placement="right"><i data-feather="inbox"></i></span>
          </a>
          <a href="#tab-chart" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Charts" data-placement="right"><i data-feather="pie-chart"></i></span>
          </a>
        </nav>
      </div><!-- component-navleft -->

      <div class="component-sidebar">
        <div class="component-sidebar-header">
          <i data-feather="search"></i>
          <div class="search-form">
            <input type="search" class="form-control" placeholder="Search components">
          </div>
        </div><!-- component-sidebar-header -->
        <div class="component-sidebar-body">
          <div class="tab-content">
            <div id="tab-layout" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media ">
                  <a class="media-body mg-l-10" href="index.html">
                    <h6 class="tx-13 mg-b-3">Introduction</h6>
                    <span class="tx-12">介绍</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="../collections/modals.html">
                    <h6 class="tx-13 mg-b-3">Modals</h6>
                    <span class="tx-12">窗口示例</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-grid" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="grid.html">
                    <h6 class="tx-13 mg-b-3">Grid System</h6>
                    <span class="tx-12">布局、栅格、后台布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-util" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="util-animation.html">
                    <h6 class="tx-13 mg-b-3">Animation</h6>
                    <span class="tx-12">动画库</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-background.html">
                    <h6 class="tx-13 mg-b-3">Background</h6>
                    <span class="tx-12">背景、颜色</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-border.html">
                    <h6 class="tx-13 mg-b-3">Border</h6>
                    <span class="tx-12">边线</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-display.html">
                    <h6 class="tx-13 mg-b-3">Display</h6>
                    <span class="tx-12">展示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-divider.html">
                    <h6 class="tx-13 mg-b-3">Divider</h6>
                    <span class="tx-12">分割</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-flex.html">
                    <h6 class="tx-13 mg-b-3">Flex</h6>
                    <span class="tx-12">布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-height.html">
                    <h6 class="tx-13 mg-b-3">Height</h6>
                    <span class="tx-12">高度</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-margin.html">
                    <h6 class="tx-13 mg-b-3">Margin</h6>
                    <span class="tx-12">外边距</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-padding.html">
                    <h6 class="tx-13 mg-b-3">Padding</h6>
                    <span class="tx-12">内边距</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-position.html">
                    <h6 class="tx-13 mg-b-3">Position</h6>
                    <span class="tx-12">位置</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-typography.html">
                    <h6 class="tx-13 mg-b-3">Typography</h6>
                    <span class="tx-12">排版</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-width.html">
                    <h6 class="tx-13 mg-b-3">Width</h6>
                    <span class="tx-12">宽度</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-extras.html">
                    <h6 class="tx-13 mg-b-3">Extras</h6>
                    <span class="tx-12">扩展</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-element" class="tab-pane fade  active show">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="el-accordion.html">
                    <h6 class="tx-13 mg-b-3">Accordion</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-alerts.html">
                    <h6 class="tx-13 mg-b-3">Alerts</h6>
                    <span class="tx-12">警告提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-avatar.html">
                    <h6 class="tx-13 mg-b-3">Avatar</h6>
                    <span class="tx-12">头像</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-badge.html">
                    <h6 class="tx-13 mg-b-3">Badge</h6>
                    <span class="tx-12">徽标数</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-breadcrumbs.html">
                    <h6 class="tx-13 mg-b-3">Breadcrumbs</h6>
                    <span class="tx-12">面包屑</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-buttons.html">
                    <h6 class="tx-13 mg-b-3">Buttons</h6>
                    <span class="tx-12">按钮</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-button-groups.html">
                    <h6 class="tx-13 mg-b-3">Button Groups</h6>
                    <span class="tx-12">按钮组</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-cards.html">
                    <h6 class="tx-13 mg-b-3">Cards</h6>
                    <span class="tx-12">卡片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-carousel.html">
                    <h6 class="tx-13 mg-b-3">Carousel</h6>
                    <span class="tx-12">走马灯</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-collapse.html">
                    <h6 class="tx-13 mg-b-3">Collapse</h6>
                    <span class="tx-12">折叠面板</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-dropdown.html">
                    <h6 class="tx-13 mg-b-3">Dropdown</h6>
                    <span class="tx-12">下拉菜单</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-icons.html">
                    <h6 class="tx-13 mg-b-3">Icons</h6>
                    <span class="tx-12">图表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-images.html">
                    <h6 class="tx-13 mg-b-3">Images</h6>
                    <span class="tx-12">图片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-list-group.html">
                    <h6 class="tx-13 mg-b-3">List Group</h6>
                    <span class="tx-12">列表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media active">
                  <a class="media-body mg-l-10" href="el-marker.html">
                    <h6 class="tx-13 mg-b-3">Marker</h6>
                    <span class="tx-12">标记</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-media-object.html">
                    <h6 class="tx-13 mg-b-3">Media Object</h6>
                    <span class="tx-12">多媒体</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-modal.html">
                    <h6 class="tx-13 mg-b-3">Modal</h6>
                    <span class="tx-12">对话框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-navs.html">
                    <h6 class="tx-13 mg-b-3">Navs</h6>
                    <span class="tx-12">导航</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-navbar.html">
                    <h6 class="tx-13 mg-b-3">Navbar</h6>
                    <span class="tx-12">导航条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-off-canvas.html">
                    <h6 class="tx-13 mg-b-3">Off-Canvas</h6>
                    <span class="tx-12">抽屉，画布闭合</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-pagination.html">
                    <h6 class="tx-13 mg-b-3">Pagination</h6>
                    <span class="tx-12">分页</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-placeholder.html">
                    <h6 class="tx-13 mg-b-3">Placeholder</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-popovers.html">
                    <h6 class="tx-13 mg-b-3">Popovers</h6>
                    <span class="tx-12">起爆卡片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-progress.html">
                    <h6 class="tx-13 mg-b-3">Progress</h6>
                    <span class="tx-12">进度条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-steps.html">
                    <h6 class="tx-13 mg-b-3">Steps</h6>
                    <span class="tx-12">步骤</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-scrollbar.html">
                    <h6 class="tx-13 mg-b-3">Scrollbar</h6>
                    <span class="tx-12">滚动条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-scrollspy.html">
                    <h6 class="tx-13 mg-b-3">Scrollspy</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-spinners.html">
                    <h6 class="tx-13 mg-b-3">Spinners</h6>
                    <span class="tx-12">加载</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-tab.html">
                    <h6 class="tx-13 mg-b-3">Tab</h6>
                    <span class="tx-12">标签页</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-toast.html">
                    <h6 class="tx-13 mg-b-3">Toast</h6>
                    <span class="tx-12">提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-tooltips.html">
                    <h6 class="tx-13 mg-b-3">Tooltips</h6>
                    <span class="tx-12">文字提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-table-basic.html">
                    <h6 class="tx-13 mg-b-3">Table Basic</h6>
                    <span class="tx-12">基础表格</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-table-advanced.html">
                    <h6 class="tx-13 mg-b-3">Table Advanced</h6>
                    <span class="tx-12">高级表格</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-form" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="form-elements.html">
                    <h6 class="tx-13 mg-b-3">Form Elements</h6>
                    <span class="tx-12">表单元素</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-input-group.html">
                    <h6 class="tx-13 mg-b-3">Input Group</h6>
                    <span class="tx-12">输入组</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-input-tags.html">
                    <h6 class="tx-13 mg-b-3">Input Tags</h6>
                    <span class="tx-12">标签</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-input-masks.html">
                    <h6 class="tx-13 mg-b-3">Input Masks</h6>
                    <span class="tx-12">标记</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-layouts.html">
                    <h6 class="tx-13 mg-b-3">Form Layouts</h6>
                    <span class="tx-12">表单布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-validation.html">
                    <h6 class="tx-13 mg-b-3">Form Validation</h6>
                    <span class="tx-12">表单验证</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-wizard.html">
                    <h6 class="tx-13 mg-b-3">Form Wizard</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-text-editor.html">
                    <h6 class="tx-13 mg-b-3">Text Editor</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-range-slider.html">
                    <h6 class="tx-13 mg-b-3">Range Slider</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-date-pickers.html">
                    <h6 class="tx-13 mg-b-3">Date Pickers</h6>
                    <span class="tx-12">日期</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-select2.html">
                    <h6 class="tx-13 mg-b-3">Select2</h6>
                    <span class="tx-12">选择框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-search.html">
                    <h6 class="tx-13 mg-b-3">Search</h6>
                    <span class="tx-12">搜索框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-chart" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-flot.html">
                    <h6 class="tx-13 mg-b-3">Flot</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-js.html">
                    <h6 class="tx-13 mg-b-3">ChartJS</h6>
                    <span class="tx-12">图表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-peity.html">
                    <h6 class="tx-13 mg-b-3">Peity</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-sparkline.html">
                    <h6 class="tx-13 mg-b-3">Sparkline</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-morris.html">
                    <h6 class="tx-13 mg-b-3">Morris</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
          </div><!-- tab-content -->
        </div><!-- component-sidebar-body -->
      </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Marker</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="df-title">Marker</h1>
        <p class="df-lead">A marker is a type of label that can be attached in any images or cards component with the help of utilities/helper classes.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">The most basic marker that is attached to image and card component.</p>

        <div class="alert alert-info tx-14 mg-b-35">
          A marker must be positioned inside a container with <code>position: relative</code> by adding a helper class <code>.pos-relative</code> to display properly. You will also need to add <code>overflow:hidden</code> to the container by adding helper class <code>.overflow-hidden</code> to produce a rounded label.
        </div><!-- alert -->

        <div data-label="Example" class="df-example">
          <div class="row row-sm">
            <div class="col-sm">
              <div class="pos-relative">
                <div class="marker pos-absolute t-10 l-10">Image Marker</div>
                <img src="https://via.placeholder.com/640x426" class="img-fluid rounded" alt="">
              </div>
            </div><!-- col -->
            <div class="col-sm mg-t-10 mg-sm-t-0">
              <div class="card card-body tx-white bg-primary shadow-none ht-100p overflow-hidden">
                <div class="marker pos-absolute t-10 l-10">Card Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- df-example -->
        <pre><code class="language-html">&lt;div class=&quot;pos-relative&quot;&gt;
  &lt;div class=&quot;marker pos-absolute t-10 l-10&quot;&gt;Image Marker&lt;/div&gt;
  &lt;img src=&quot;...&quot; class=&quot;img-fluid rounded&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;card card-body tx-white bg-primary shadow-none ht-100p overflow-hidden&quot;&gt;
  &lt;div class=&quot;marker pos-absolute t-10 l-10&quot;&gt;Card Marker&lt;/div&gt;
  &lt;h6 class=&quot;mg-b-15 mg-t-30&quot;&gt;What does free royalty mean?&lt;/h6&gt;
  &lt;p class=&quot;mg-b-0&quot;&gt;Royalty free means...&lt;/p&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Positioning</h4>
        <p class="mg-b-30">A marker can change it's position with the help of position helper classes.</p>

        <div data-label="Example" class="df-example">
          <div class="row row-sm">
            <div class="col-sm-6">
              <div class="pos-relative">
                <div class="marker pos-absolute t-10 l-10">Top Left</div>
                <img src="https://via.placeholder.com/640x426" class="img-fluid rounded" alt="">
              </div>
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-0">
              <div class="pos-relative">
                <div class="marker pos-absolute t-10 r-10">Top Right</div>
                <img src="https://via.placeholder.com/640x426" class="img-fluid rounded" alt="">
              </div>
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-20">
              <div class="pos-relative">
                <div class="marker pos-absolute b-10 l-10">Bottom Left</div>
                <img src="https://via.placeholder.com/640x426" class="img-fluid rounded" alt="">
              </div>
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-20">
              <div class="pos-relative">
                <div class="marker pos-absolute b-10 r-10">Bottom Right</div>
                <img src="https://via.placeholder.com/640x426" class="img-fluid rounded" alt="">
              </div>
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- df-example -->

        <pre><code class="language-html">&lt;div class=&quot;pos-relative&quot;&gt;
  &lt;div class=&quot;marker pos-absolute t-10 l-10&quot;&gt;Top Left&lt;/div&gt;
  &lt;img src=&quot;...&quot; class=&quot;img-fluid rounded&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;pos-relative&quot;&gt;
  &lt;div class=&quot;marker pos-absolute t-10 r-10&quot;&gt;Top Left&lt;/div&gt;
  &lt;img src=&quot;...&quot; class=&quot;img-fluid rounded&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;pos-relative&quot;&gt;
  &lt;div class=&quot;marker pos-absolute b-10 l-10&quot;&gt;Top Left&lt;/div&gt;
  &lt;img src=&quot;...&quot; class=&quot;img-fluid rounded&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;pos-relative&quot;&gt;
  &lt;div class=&quot;marker pos-absolute b-10 r-10&quot;&gt;Top Left&lt;/div&gt;
  &lt;img src=&quot;...&quot; class=&quot;img-fluid rounded&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Icon Marker</h4>
        <p class="mg-b-30">A marker can be an icon with the use of class <code>.marker-icon</code>.</p>

        <div data-label="Example" class="df-example">
          <div class="row row-sm">
            <div class="col-sm">
              <div class="pos-relative overflow-hidden rounded">
                <div class="marker-icon marker-top-left pos-absolute t-0 l-0"><i data-feather="zap"></i></div>
                <img src="https://via.placeholder.com/640x426" class="img-fluid" alt="">
              </div>
            </div><!-- col -->
            <div class="col-sm mg-t-10 mg-sm-t-0">
              <div class="card card-body ht-100p overflow-hidden">
                <div class="marker-icon marker-top-right pos-absolute t-0 r-0"><i data-feather="zap"></i></div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- df-example -->
        <pre><code class="language-html">&lt;div class=&quot;pos-relative overflow-hidden rounded&quot;&gt;
  &lt;div class=&quot;marker-icon pos-absolute t-0 l-0&quot;&gt;&lt;i data-feather=&quot;zap&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;img src=&quot;https://via.placeholder.com/640x426&quot; class=&quot;img-fluid&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Ribbon Marker</h4>
        <p class="mg-b-30">A marker style variant like ribbon like in the example below.</p>

        <div data-label="Example" class="df-example">
          <div class="row row-sm">
            <div class="col-sm-6">
              <div class="card card-body shadow-none">
                <div class="marker marker-ribbon pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-0">
              <div class="card card-body shadow-none">
                <div class="marker marker-ribbon marker-top-right pos-absolute t-10 r-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- df-example -->
        <pre><code class="language-html">&lt;div class="marker marker-ribbon"&gt;Ribbon Marker&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Contextual Variations</h4>
        <p class="mg-b-30">Add any of the below mentioned modifier classes to change the appearance of a marker. The example below uses border color utility class for card component and not part of the marker style.</p>

        <div data-label="Example" class="df-example">
          <div class="row">
            <div class="col-sm-6">
              <div class="card card-body shadow-none bd-primary overflow-hidden">
                <div class="marker-icon marker-primary pos-absolute t-0 l-0">
                  <i data-feather="zap"></i>
                </div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-0">
              <div class="card card-body shadow-none bd-primary">
                <div class="marker marker-ribbon marker-primary pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-gray-500 overflow-hidden">
                <div class="marker-icon marker-secondary pos-absolute t-0 l-0">
                  <i data-feather="zap"></i>
                </div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-gray-500">
                <div class="marker marker-ribbon marker-secondary pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-success overflow-hidden">
                <div class="marker-icon marker-success pos-absolute t-0 l-0">
                  <i data-feather="zap"></i>
                </div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-success">
                <div class="marker marker-ribbon marker-success pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-danger overflow-hidden">
                <div class="marker-icon marker-danger pos-absolute t-0 l-0">
                  <i data-feather="zap"></i>
                </div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-danger">
                <div class="marker marker-ribbon marker-danger pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-warning overflow-hidden">
                <div class="marker-icon marker-warning pos-absolute t-0 l-0">
                  <i data-feather="zap"></i>
                </div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-warning">
                <div class="marker marker-ribbon marker-warning pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-info overflow-hidden">
                <div class="marker-icon marker-info pos-absolute t-0 l-0">
                  <i data-feather="zap"></i>
                </div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-info">
                <div class="marker marker-ribbon marker-info pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-dark overflow-hidden">
                <div class="marker-icon marker-dark pos-absolute t-0 l-0">
                  <i data-feather="zap"></i>
                </div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm-6 mg-t-10 mg-sm-t-25">
              <div class="card card-body shadow-none bd-dark">
                <div class="marker marker-ribbon marker-dark pos-absolute t-10 l-0">Ribbon Marker</div>
                <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
                <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product.</p>
              </div><!-- card -->
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- df-example -->
        <pre><code class="language-html">&lt;div class=&quot;marker-icon marker-primary pos-absolute t-0 l-0&quot;&gt;
  &lt;i data-feather=&quot;zap&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class="marker marker-ribbon marker-primary pos-absolute t-10 l-0"&gt;Ribbon Marker&lt;/div&gt;</code></pre>



<footer class="content-footer">
  <div>
    <span>&copy; 2019 Tangdao Design v1.0.0. </span>
    <span>Made by <a href="http://gitee.com/ruyangit">Ryan</a></span>
  </div>
  <div>
    <nav class="nav">
      <a href="#" class="nav-link">Licenses</a>
      <a href="../change-log.html" class="nav-link">Change Log</a>
      <a href="#" class="nav-link">Get Help</a>
    </nav>
  </div>
</footer><!-- content-footer -->

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Positioning</a>
            <a href="#section3" class="nav-link">Icon Marker</a>
            <a href="#section4" class="nav-link">Ribbon Marker</a>
            <a href="#section5" class="nav-link">Contextual Variations</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->

    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../lib/feather-icons/feather.min.js"></script>
    <script src="../lib/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="../lib/prismjs/prism.js"></script>

    <script src="../assets/js/tangdao.js"></script>
    <script src="../assets/js/tangdao.component.js"></script>

  </body>
</html>
